<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>2023庄磊简历</title>
    <meta name="viewport" content="width=device-width" />
    <!-- favicon图标 -->
    <link
      rel="shortcut icon"
      href="../../static/favicon.png"
      type="image/x-icon"
    />
    <!-- 51la网站统计 -->
    <script src="../../static/js/tongji.js"></script>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/side.css" />
    <!-- 阿里字体图标 -->
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/c/font_2969103_117wkqbc6tln.css"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- ------------ 简历 start ------------ -->
    <!-- ------------ 简历 end ------------ -->

    <div class="resume-box" id="app">
      <div class="node1"></div>
      <div class="node2"></div>
      <!-- ------------ 头部 start ------------ -->
      <div class="resume-head">
        <div class="head-left"></div>
        <div class="head-center">
          <div class="head-label">个人简历</div>
        </div>
        <div class="head-right"></div>
      </div>
      <!-- ------------ 头部 end ------------ -->

      <!-- ------------ 内容 start ------------ -->
      <div class="resume-content">
        <!-- ------------ 基本信息 start ------------ -->

        <div class="basic-info" v-if="datas.xinxi">
          <!-- 照片 -->
          <div class="basic-photo">
            <img :src="datas.xinxi.img" alt="photo" />
          </div>
          <!-- 右侧信息 -->
          <div class="basic-wrap">
            <div class="basic-top">
              <dl>
                <!-- 姓名 -->
                <dt>{{datas.xinxi.user}}</dt>
                <!-- 求职意向 -->
                <dd><span>{{datas.xinxi.name}}：</span>{{datas.xinxi.text}}</dd>
              </dl>
            </div>
            <div class="basic-bottom">
              <ul class="basic-list">
                <!-- 六要素 -->
                <li v-for="(item, index) in datas.xinxi.data" :key="index">
                  <i :class="icon[index]"></i
                  ><span>{{item.name}}：</span>{{item.text}}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- ------------ 基本信息 end ------------ -->

        <!-- ------------ 教育背景 start ------------ -->
        <div class="module jiaoyu" v-if="datas.jiaoyu">
          <!-- 模块标题 -->
          <div class="module-title">
            <h3>{{datas.jiaoyu.title}}</h3>
          </div>
          <!-- 模块内容 -->
          <div class="module-content">
            <div
              class="list-wrap"
              v-for="(item, index) in datas.jiaoyu.data"
              :key="index"
              v-show="index<2"
            >
              <ul class="item-col3">
                <li>{{ item.time }}</li>
                <li>{{ item.name }}</li>
                <li>{{ item.type }}</li>
              </ul>

              <div class="item-edit" v-if="item.data">
                <p><strong>{{ item.data.name }}</strong>{{ item.data.text}}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 教育背景 end ------------ -->

        <!-- ------------ 工作经历 start ------------ -->
        <div class="module gongzuo" v-if="datas.gongzuo">
          <div class="module-title">
            <h3>{{datas.gongzuo.title}}</h3>
          </div>

          <div class="module-content">
            <div
              class="list-wrap"
              v-for="(item, index) in datas.gongzuo.data"
              :key="index"
              v-show="index<4"
            >
              <ul class="item-col3">
                <li>{{item.time}}</li>
                <li>{{item.name}}</li>
                <li>{{item.type}}</li>
              </ul>
              <div class="item-edit">
                <ol v-for="(item, index) in item.data" :key="index">
                  <li>{{item.text}}</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 工作经验 end ------------ -->

        <!-- ------------ 项目经验 start ------------ -->
        <div class="module xiangmu" v-if="datas.xiangmu">
          <div class="module-title">
            <h3>{{datas.xiangmu.title}}</h3>
          </div>
          <div class="module-content">
            <div
              class="list-wrap"
              v-for="(item, index) in datas.xiangmu.data"
              :key="index"
            >
              <!-- 左右两行 -->
              <ul class="item-col2">
                <li v-if="item.name">{{item.name}}</li>
                <li v-if="item.text">{{item.text}}</li>
              </ul>
              <div class="item-edit">
                <!-- 项目介绍 -->
                <p v-for="(item, index) in item.jieshao" :key="index">
                  <strong>{{item.name}}：</strong><span>{{item.text}}</span>
                </p>
                <!-- 项目职责 -->
                <div>
                  <strong>{{item.zhize.name}}：</strong>
                  <ul>
                    <li v-for="(item, index) in item.zhize.data" :key="index">
                      {{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 项目经验 end ------------ -->

        <!-- ------------ 培训经历 start------------ -->
        <div class="module peixun" v-if="datas.peixun00">
          <div class="module-title">
            <h3>{{datas.peixun.title}}</h3>
          </div>

          <div class="module-content">
            <div
              class="list-wrap"
              v-for="(item, index) in datas.peixun.data"
              :key="index"
            >
              <ul class="item-col3" v-show="index<3">
                <li>{{item.time}}</li>
                <li>{{item.name}}</li>
                <li>{{item.type}}</li>
              </ul>
              <div class="item-edit" v-if="item.cont">
                <div>
                  <strong>{{item.cont.name}}</strong>
                  <span>{{item.cont.text}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 培训经历 end------------ -->

        <!-- ------------ 专业技能 start ------------ -->
        <div class="module jineng" v-if="datas.jineng">
          <div class="module-title">
            <h3>{{datas.jineng.title}}</h3>
          </div>
          <div class="module-content">
            <div class="list-wrap">
              <div class="item-edit">
                <ul>
                  <li
                    v-for="(item, index) in datas.jineng.data"
                    :key="index"
                    v-show="index < 6 "
                  >
                    {{item.text}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 专业技能 end ------------ -->

        <!-- ------------ 校园经历 start ------------ -->
        <div class="module xiaoyuan" v-if="datas.xiaoyuan00">
          <div class="module-title">
            <h3>{{datas.xiaoyuan.title}}</h3>
          </div>
          <div class="module-content">
            <div class="list-wrap">
              <div class="item-edit">
                <p v-for="(item, index) in datas.xiaoyuan.data" :key="index">
                  <strong>{{item.name}}</strong><span>{{item.text}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 校园经历 end ------------ -->

        <!-- ------------ 荣誉证书 start ------------ -->
        <div class="module zhengshu" v-if="datas.zhengshu">
          <div class="module-title">
            <h3>{{datas.zhengshu.title}}</h3>
          </div>
          <div class="module-content">
            <div class="list-wrap">
              <div class="item-between">
                <ul>
                  <li
                    v-for="(item, index) in datas.zhengshu.data.ry"
                    :key="index"
                    v-show="index<4"
                  >
                    <i>{{item.name}}</i>：<span>{{item.text}}</span>
                  </li>
                </ul>
                <!-- <ul>
								<li v-for="(item, index) in datas.zhengshu.data.zs" :key="index" v-show="index<4">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>
							</ul> -->
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 荣誉证书 end ------------ -->

        <!-- ------------ 自我评价 start ------------ -->
        <div class="module pingjia" v-if="datas.pingjia" id="pingjia">
          <div class="module-title">
            <h3>{{datas.pingjia.title}}</h3>
          </div>
          <div class="module-content">
            <div class="list-wrap">
              <div class="item-edit">
                <ul>
                  <li
                    v-for="(item, index) in datas.pingjia.data"
                    :key="index"
                    v-show="index<5"
                  >
                    {{item.text}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- ------------ 自我评价 end ------------ -->

        <!-- ------------ 公共模块 start ------------ -->
        <!-- 	<div class="module">
					<div class="module-title">
						<h3>公共模块</h3>
					</div>
					<div class="module-content">

						<div class="list-wrap">
							公共模块
						</div>

					</div>
				</div> -->
        <!-- ------------ 公共模块 end ------------ -->
      </div>
      <!-- ------------ 内容 end ------------ -->

      <!-- ------------ 底部 start ------------ -->
      <div class="footer">bealei</div>
      <!-- ------------ 底部 end ------------ -->
    </div>

    <!-- ------------ 侧边栏 start------------ -->

    <div class="side">
      <ul>
        <li class="peise">
          配色
          <ul id="peise">
            <li class="blue" onclick="blue()"></li>
            <li class="green" onclick="green()"></li>
            <li class="red" onclick="red()"></li>
            <li class="yellow" onclick="yellow()"></li>
          </ul>
        </li>
        <li class="dayin" onclick="dayin()">打印</li>

        <li class="image" onclick="image()">图片</li>
      </ul>
    </div>
    <!-- ------------ 侧边栏 end------------ -->
  </body>

  <script src="./js/jquery-3.6.0.min.js"></script>
  <script src="./js/vue-2.7.14.min.js"></script>
  <script src="./js/dom-to-image-2.6.0.min.js"></script>
  <script src="./js/side.js"></script>

  <script type="text/javascript">
    Vue.config.productionTip = true; //阻止 vue 在启动时生成生产提示。
    new Vue({
      el: "#app",
      data() {
        return {
          datas: [],
          // 基本资料图标
          icon: [
            "iconfont icon-calendar1",
            "iconfont icon-weixin",
            "iconfont icon-jiaoyuye",
            "iconfont icon-shouji",
            "iconfont icon-gongzuodidian-",
            "iconfont icon-youjian3",
          ],
        };
      },

      mounted() {
        // 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
        const that = this;
        // 使用getjson读取数据
        $.getJSON("./data.json", function (data) {
          // 将读取到的json数据赋值给rows
          that.datas = data.content;
          console.log("请求到的数据：", data);
        });
      },
    });
  </script>
</html>
